<!--  -->
<template>
  <div class="app-container">
    <div class="container">
      <div class="head-container">
        <el-card shadow="never">

          <el-form :inline="true" :model="dataForm">
            <el-form-item>
              <el-button v-permission="['ADMIN', 'menu::add-menu']" type="primary" @click="addOrUpdateHandle()">新增</el-button>
            </el-form-item>
          </el-form>

          <el-table
            :data="dataList"
            row-key="id"
            style="width: 100%; ">
            <el-table-column
              prop="name"
              header-align="center"

              label="名称" />
            <el-table-column
              prop="level"
              header-align="center"
              align="center"
              width="70"
              label="类型">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.level === 0" size="small">目录</el-tag>
                <el-tag v-else-if="scope.row.level === 1" size="small" type="success">菜单</el-tag>
                <el-tag v-else-if="scope.row.level === 2" size="small" type="info">按钮</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="sort"
              header-align="center"
              align="center"

              label="排序号"/>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="path"
              header-align="center"
              align="center"

              label="菜单URL"/>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="permissions"
              header-align="center"
              align="center"
              label="授权标识"/>
            <el-table-column
              fixed="right"
              header-align="center"
              align="center"
              label="操作">
              <template slot-scope="scope">
                <el-button v-permission="['ADMIN', 'menu::update-menu']" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                <el-button v-permission="['ADMIN', 'user::delete-menu']" type="text" size="small" @click="deleteHandle(scope.row.id,scope.row.name)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <AddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="init"/>
  </div>
</template>

<script>
import { listMenuTree, deleteMenu } from '@/api/menu'
import AddOrUpdate from './menuAddOrUpdate'
export default {
  components: {
    AddOrUpdate
  },
  data() {
    // 这里存放数据
    return {
      dataList: [],
      dataForm: {},
      addOrUpdateVisible: false
    }
  },
  created() {
    this.init()
  },
  // 方法集合
  methods: {
    // 初始化数据列表
    init() {
      listMenuTree().then(resp => {
        this.dataList = resp.data
      })
    },
    // 删除事件
    deleteHandle(id, name) {
      this.$confirm(`此操作将永久删除${name}, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteMenu(id).then(resp => {
          console.log(resp)
          if (resp.success === true) {
            this.$notify({
              title: '成功',
              message: `删除${name}成功`,
              type: 'success'
            })
            this.init()
          }
        })
      }).catch(() => {})
    },
    // 新增或者修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    }
  }
}
</script>
<style lang="scss">
  .mod-menu {
    .menu-list__input,
    .icon-list__input {
       > .el-input__inner {
        cursor: pointer;
      }
    }
    &__icon-popover {
      width: 458px;
      overflow: hidden;
    }
    &__icon-inner {
      width: 478px;
      max-height: 258px;
      overflow-x: hidden;
      overflow-y: auto;
    }
    &__icon-list {
      width: 458px;
      padding: 0;
      margin: -8px 0 0 -8px;
      > .el-button {
        padding: 8px;
        margin: 8px 0 0 8px;
        > span {
          display: inline-block;
          vertical-align: middle;
          width: 18px;
          height: 18px;
          font-size: 18px;
        }
      }
    }
    .icon-list__tips {
      font-size: 18px;
      text-align: center;
      color: #e6a23c;
      cursor: pointer;
    }
  }
</style>
